<template>
    <div class="center-bill">
        <div class="cb-list">
            <div class="cb-item" v-for="data in list" :key="data.menuFatherId">
                <img :src="data.menuFatherSrc" alt="" @click="jump(data.menuFatherId)">
                <h3 @click="jump(data.menuFatherId)">{{data.menuFatherName}}</h3>
                <p @click="jump(data.menuFatherId)">{{nums(data.menuIds)}}道菜谱</p>
                <i v-if="delFlag" class="el-icon-delete foodDelBtn foodDelBtnMenu" @click="delFoodFun(data)"></i>
            </div>
        </div>
      <el-empty :image-size="200" v-if="list.length === 0"></el-empty>
      <div class="page">
        <el-pagination
          class="pages"
          background
          layout="prev, pager, next"
          :total="pages.total"
          :hide-on-single-page=true
          :current-page="pages.current"
          :pager-count=5
          :page-size=12
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import cookie from '../../../cookien'
export default {
  data () {
    return {
      list: [],
      current_page: 1,
      total: '100',
      loading: true,
      // 分页
      pages: {
        // 每页十条，共几条
        total: 0,
        // 当前页数
        vals: 1,
        // 自定义第几页
        current: 1
      },
      delFlag: false
    }
  },
  computed: {
    nums (h) {
      return (h) => {
        if (h === '') {
          return 0
        } else {
          return h.split(',').length
        }
      }
    }
  },
  mounted () {
    this.getData()
    if (this.$route.params.userId === this.$store.state.userMsg.userId) {
      this.delFlag = true
    } else {
      this.delFlag = false
    }
  },
  methods: {
    // 跳转
    jump (h) {
      this.$router.push({
        name: 'MenuListDetails',
        params: {
          id: h
        }
      })
    },
    delFoodFun (key) {
      this.$confirm('是否删除该菜单？（注意：删除后将不可找回）', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'delete',
          url: '/Menu/User/deleteMenuFather',
          params: {
            menuFatherId: key.menuFatherId,
            userId: key.userId
          }
        }).then(data => {
          console.log(data.data)
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '已删除!'
            })
            this.getData()
          } else {
            this.$message({
              type: 'info',
              message: data.message
            })
          }
        }).catch(error => {
          console.log(error)
        })
      })
    },
    getData () {
      this.$axios({
        url: '/Menu/Visitor/findMenuFatherByUserId',
        params: {
          userId: this.$route.params.userId,
          pageNow: this.pages.vals,
          pageSize: 12
        },
        headers: {
          token: cookie.getToken()
        }
      }).then(data => {
        if (data.data.code === 200) {
          this.pages.total = data.data.object.total
          this.list = data.data.object.list
          this.loading = false
        //   this.userInfo = data.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      this.pages.vals = val
      this.getData()
    }
  }
}
</script>

<style lang="less">
.center-bill{
    margin-top:10px;
}
.pages{
  margin-top: 20px;
  display: flex;
  justify-content:center;
  flex-wrap:wrap;
}
.cb-list{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,306px);
    place-content: space-around space-between;
    .cb-item{
      cursor: pointer;
        position: relative;
        width: 100%;
        height:172px;
        margin-top: 20px;
        img{
            width: 100%;height: 100%;
            object-fit: cover;
            border-radius: 8px;
            position:absolute;
            top: 0;left: 0
        }
        h3{
            position:absolute;
            top: 50px;
            width: 298px;
            color: #fff;
            text-align: center;
            //font-weight: 20px;
            left:50%;transform:translateX(-50%);
            text-shadow: 0 1px 2px rgb(0 0 0 0.5);
            text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
        }
        p{
            width: 298px;font-size: 16px;color: #FFF;
            text-shadow: 0 1px 2px rgba(0,0,0,0.28);
            text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
            position:absolute;
            text-align: center;
            top: 80px;left:50%;transform:translateX(-50%);
        }
    }
}
</style>
